<template>
  <div class="bg">
    <!-- 头部 -->
    <Header title="能源管理—用能考核"></Header>

    <section class="search_bar">
      <!-- 1 -->
      <el-radio-group v-model="radio" @change="changeSelect1">
        <el-radio-button label="电"></el-radio-button>
        <el-radio-button label="水"></el-radio-button>
      </el-radio-group>
      <!-- 2 -->
      <LSelect label="定额种类" placeholder="请选择" style="margin:3px 0 0 30px;" :value="a" :options="option1"></LSelect>
      <LSelect label="对象选择" placeholder="请选择" style="margin:3px 0 0 30px;" :value="a" :options="option1"></LSelect>
      <!-- 3 -->
      <el-radio-group v-model="radio1" style="margin-left: 30px;">
        <el-radio-button label="年"></el-radio-button>
      </el-radio-group>
      <LDateTimeSelect5 label="选择时间" style="margin:3px 0 0 5px;" :value="t3" @month-event="getNewTime3"></LDateTimeSelect5>
      <!-- 4 -->
      <LButton label="查询" style="margin:0px 0 0 30px;"></LButton>
    </section>
    <!-- 分区 -->
    <div class="area">
      <div class="area-1">
        <div style="font-size:10px;float:left">单位：MWh</div>
        <!-- <Ctwo width="100%" height="880px" :legendData="legendData1" :xAxisData="xAxisData1" :seriesData="seriesData1"></Ctwo> -->
        <Csix width="100%" height="880px"></Csix>
      </div>
      <div class="area-2">
        <div class="area-22">
          <!-- <img src="../../../assets/img/export.png" alt="" title="导出"> -->
          <div class="area-2-1">
            <div>累计已用</div>
            <div>{{b}}MWh</div>
            <div class="area-2-1-1">
              <div>
                <div>累计定额</div>
                <div>{{c1}}MWh</div>
              </div>
              <div>
                <div>0%</div>
              </div>
            </div>
            <div class="area-2-1-1">
              <div>
                <div>年定额</div>
                <div>{{c3}}MWh</div>
              </div>
              <div></div>
            </div>
            <div class="area-2-1-1">
              <div>
                <div>预计年使用</div>
                <div>{{c3}}MWh</div>
              </div>
              <div></div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import moment from "moment";
import * as echarts from "echarts";
import Header from "@/components/Header";
import LSelect3 from "@/components/LSelect3.vue";
import LDateTimeSelect3 from "@/components/LDateTimeSelect3.vue";
import LDateTimeSelect2 from "@/components/LDateTimeSelect2.vue";
import LDateTimeSelect4 from "@/components/LDateTimeSelect4.vue";
import LDateTimeSelect5 from "@/components/LDateTimeSelect5.vue";
import LButton from "@/components/LButton.vue";
import Csix from "@/components/Csix";
import LSelect from "@/components/LSelect.vue";

export default {
  components: {
    Header,
    LSelect3,
    LDateTimeSelect3,
    LDateTimeSelect2,
    LDateTimeSelect4,
    LDateTimeSelect5,
    LButton,
    Csix,
    LSelect,
  },
  data() {
    return {
      radio: "电",
      radio1: "年",
      a: "",
      t3: new Date(),
      b: "3506.17",
      c1: "3506.17",
      c2: "3506.17",
      c3: "3506.17",
      c4: "3506.17",

      legendData1: null,
      xAxisData1: [],
      seriesData1: [], // 第一组 月度温湿度数据

      option1: [
        {
          value: "zhinan",
          label: "指南",
          children: [
            {
              value: "shejiyuanze",
              label: "设计原则",
              children: [
                {
                  value: "yizhi",
                  label: "一致",
                },
                {
                  value: "fankui",
                  label: "反馈",
                },
                {
                  value: "xiaolv",
                  label: "效率",
                },
                {
                  value: "kekong",
                  label: "可控",
                },
              ],
            },
            {
              value: "daohang",
              label: "导航",
              children: [
                {
                  value: "cexiangdaohang",
                  label: "侧向导航",
                },
                {
                  value: "dingbudaohang",
                  label: "顶部导航",
                },
              ],
            },
          ],
        },
      ],
    };
  },

  mounted() {
    this.legendData1 = ["偏差值%"];

    this.xAxisData1 = ["1月", "2月", "3月", "4月", "5月"];

    this.seriesData1 = [
      {
        name: "偏差值%",
        type: "line",

        smooth: true, // 平滑曲线显示
        symbolSize: 3,
        symbol: "circle",
        itemStyle: {
          color: "#00c0e9",
        },
        markPoint: {
          label: {
            normal: {
              textStyle: {
                color: "#fff",
              },
            },
          },
          data: [
            {
              type: "max",
              name: "最大值",
            },
            {
              type: "min",
              name: "最小值",
            },
          ],
        },
        markLine: {
          label: {
            show: true,
            color: "#FFF",
          },
          data: [{ type: "average", name: "Avg" }],
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "RGBA(0,192,233,0.5)",
            },
            {
              offset: 1,
              color: "RGBA(0,192,233,0)",
            },
          ]),
        },
        data: [1.2, 0.8, 1.5, 0.63, 0, 0],
      },
    ];
  },
  beforeUnmount() {},
  methods: {
    getNewTime3(t) {
      console.log("t3+++", t);
      this.t3 = t;
    },
    changeSelect1(val) {
      this.radio = val;
      console.log("this.radio:", this.radio);
    },
  },
};
</script>
<style lang="less" scoped>
@import "../../OperaManage/opera.less";

.search_bar {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

/deep/ .el-radio-button__inner {
  border: none;
}

/deep/ .el-radio-button:first-child .el-radio-button__inner {
  border-left: none;
}

.area {
  display: flex;
  justify-content: space-between;

  .area-1 {
    width: 75%;
    height: 86vh;

    /deep/ .el-input,
    .el-textarea__inner {
      border: 1px solid #72aeff;
      border-radius: 5px;
      background-color: transparent;
      width: 100px;
    }
  }

  .area-2 {
    width: 24%;
    height: 86vh;
    margin-top: 7.5vh;

    .area-22 {
      img {
        width: 3vh;
        height: 3vh;
        margin-bottom: 1.5vh;
        cursor: pointer;
      }
    }

    .area-2-1 {
      width: 100%;
      height: 500px;
      background-color: rgba(255, 255, 255, 0.3);
      border-radius: 10px;
      text-align: center;
      padding-top: 3.5vh;

      & > div:first-child {
        font-size: 2.5rem;
        line-height: 40px;
        background-color: rgba(0, 191, 255, 1);
        display: inline-block;
        padding: 1vh;
        margin: 2vh 0;
      }

      & > div:nth-child(2) {
        font-size: 2rem;
        color: rgba(0, 191, 255, 1);
      }
    }

    .area-2-1-1 {
      display: flex;
      align-items: center;
      margin-top: 3vh;
      padding: 0 2.5vw;


      div {
        width: 15vh;
        font-size: 1.2rem;
        margin: 0 auto;
        // background-color: red;
      }
    }
  }
}
</style>
